import { Vue, Options } from 'vue-class-component';
import { PieChartOutlined, DesktopOutlined, InboxOutlined, AppstoreOutlined } from '@ant-design/icons-vue';
import { Watch } from 'vue-property-decorator';
import './app-sider-menu.less';

@Options({})
export class AppSiderMenu extends Vue {
    /**
     * 菜单数据
     *
     * @type {any[]}
     * @memberof AppSiderMenu
     */
    menus: any[] = [];

    /**
     * 选中菜单项 key
     *
     * @type {any[]}
     * @memberof AppSiderMenu
     */
    selectedKeys: any[] = ['1'];

    /**
     * 打开菜单项 key
     *
     * @type {any[]}
     * @memberof AppSiderMenu
     */
    openKeys: any[] = [];

    /**
     * 选中菜单项 key
     *
     * @type {*}
     * @memberof AppSiderMenu
     */
    selectedKeysMap: any = {};

    /**
     * 打开菜单项 key
     *
     * @type {*}
     * @memberof AppSiderMenu
     */
    openKeysMap: any = {};

    /**
     * 菜单项单机触发
     *
     * @param {*} val
     * @memberof AppSiderMenu
     */
    handleClick(val: any) {
        this.selectedKeys = [val.key];
        this.$router.push({path:val.key});
    }

    @Watch('$route.path', { immediate: true })
    routePathWatch(val: string) {
        this.selectedKeys = this.selectedKeysMap[val];
        this.openKeys = this.openKeysMap[val];
    }

    /**
     * Vue生命周期，实力创建完成
     *
     * @memberof AppSiderMenu
     */
    created() {
        const routes = this.$router.options.routes;
        this.menus = this.getMenuData(routes);
        this.selectedKeys = this.selectedKeysMap[this.$route.path];
        this.openKeys = this.openKeysMap[this.$route.path];
    }

    /**
     * 获取菜单数据
     *
     * @param {any[]} routes
     * @memberof AppSiderMenu
     */
    getMenuData(routes: any[] = [], parentKeys: any[] = [], selectedKey?: any): any[] {
        const menuData: any[] = [];
        routes.forEach((item: any) => {
            if (item.name && !item.props?.hideInMenu) {
                this.openKeysMap[item.path] = parentKeys;
                this.selectedKeysMap[item.path] = [selectedKey || item.path];
                const newItem = { ...item };
                delete newItem.children;
                if (item.children && !item.props?.hideChildrenInMenu) {
                    newItem.children = this.getMenuData(item.children, [...parentKeys, item.path]);
                } else {
                    this.getMenuData(
                        item.children,
                        selectedKey ? parentKeys : [...parentKeys, item.path],
                        selectedKey || item.path,
                    );
                }
                menuData.push(newItem);
            } else if (!item.props?.hideInMenu && !item.props?.hideChildrenInMenu && item.children) {
                menuData.push(...this.getMenuData(item.children, [...parentKeys, item.path]));
            } else {
            }
        });
        return menuData;
    }

    /**
     * 绘制函数
     *
     * @return {*}
     * @memberof AppSiderMenu
     */
    render() {
        return (
            <div class='app-sider-menu'>
                <a-menu
                    openKeys={this.openKeys}
                    selectedKeys={this.selectedKeys}
                    onClick={this.handleClick}
                    mode='inline'
                    theme='dark'
                >
                    {this.menus.map((menu: any) => {
                        return menu.children ? (
                            this.renderChildren(menu)
                        ) : (
                            <a-menu-item key={menu.path}>
                                <PieChartOutlined />
                                <span>{menu.meta.title}</span>
                            </a-menu-item>
                        );
                    })}
                </a-menu>
            </div>
        );
    }

    /**
     * 绘制子菜单
     *
     * @param {*} menu
     * @memberof AppSiderMenu
     */
    renderChildren(menu: any) {
        return (
            <a-sub-menu key={menu.path} title={menu.meta.title}>
                {menu.children.map((child: any) => {
                    return child.chlildren ? (
                        this.renderChildren(child)
                    ) : (
                        <a-menu-item key={child.path}>
                            <PieChartOutlined />
                            <span>{child.meta.title}</span>
                        </a-menu-item>
                    );
                })}
            </a-sub-menu>
        );
    }
}
